define(function(require, exports, module) {
  'use strict';

  var SettingView = Backbone.View.extend({
    el: $('#mob-container'),
    initialize: function() {
      this.render();
      this.bindEvents();
    },
    render: function() {
      console.log('[DEBUG] Rendering Settings Page.');
      var h = [],
        f = [];
      h.push('<div class="mob-setting-container">');

      h.push('<ul>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-more">修改密码</div>');
      h.push('</li>');
      h.push('</ul>');

      h.push('<ul>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-toggle-btn mob-setting-toggle-btn-off" toggleStatus="off">消息滚动</div>');
      h.push('</li>');
      h.push('</ul>');

      h.push('<ul>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-more">字体设置</div>');
      h.push('</li>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-more">关键字颜色</div>');
      h.push('</li>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-toggle-btn mob-setting-toggle-btn-on" toggleStatus="on">关键字提示</div>');
      h.push('</li>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-more">主题风格</div>');
      h.push('</li>');
      h.push('</ul>');

      h.push('<ul>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-more">版本更新</div>');
      h.push('</li>');
      h.push('</ul>');

      h.push('<ul>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-more">关于我们</div>');
      h.push('</li>');
      h.push('</ul>');

      h.push('<ul>');
      h.push('<li>');
      h.push('<div class="mob-setting-list mob-setting-more">好友分享</div>');
      h.push('</li>');
      h.push('</ul>');

      h.push('</div>');
      this.$el.append(h.join(''));

      f.push('<div class="mob-setting-footer">');
      f.push('<ul>');
      f.push('<li>');
      f.push('<div class="mob-tab-common mob-tab-message">');
      f.push('</div>');
      f.push('<div class="mob-tab-text">');
      f.push('信息');
      f.push('</div>');
      f.push('</li>');
      f.push('<li class="mob-tab-current">');
      f.push('<div class="mob-tab-common mob-tab-setting">');
      f.push('</div>');
      f.push('<div class="mob-tab-text">');
      f.push('设置');
      f.push('</div>');
      f.push('</li>');
      f.push('<li>');
      f.push('<div class="mob-tab-common mob-tab-me">');
      f.push('</div>');
      f.push('<div class="mob-tab-text">');
      f.push('个人信息');
      f.push('</div>');
      f.push('</li>');
      f.push('</ul>');
      f.push('</div>');
      $('footer').append(f.join(''));
    },
    bindEvents: function() {
      this.toggleClickHandler();
      this.tabClickHandler();
    },
    toggleClickHandler: function() {
      var toggleButton = this.$el.find('div.mob-setting-toggle-btn');
      toggleButton.on('click', function(event) {
        var $target = $(event.target);
        var status = $target.attr('toggleStatus');
        if (status == 'off') {
          $target.attr('toggleStatus', 'on');
          $target.removeClass('mob-setting-toggle-btn-off').addClass('mob-setting-toggle-btn-on');
        } else if (status == 'on') {
          $target.attr('toggleStatus', 'off');
          $target.removeClass('mob-setting-toggle-btn-on').addClass('mob-setting-toggle-btn-off');
        }
      });
    },
    tabClickHandler: function() {
      var tab = $('.mob-setting-footer li');
      tab.on('click', function() {
        $(this).siblings().removeClass('mob-tab-current');
        if ($(this).hasClass('mob-tab-current')) {
          return;
        } else {
          $(this).addClass('mob-tab-current');
        }
      });
    }
  });

  return SettingView;
});
